<template>
  <div class="app-container">
    <!--上层控制-->
    <el-button @click="dialogUploadVisible=true">上传</el-button>
    <el-button @click="preSingleImageVisible=true">上传图片</el-button>
    <pre-single-image :show.sync="preSingleImageVisible"
                      @success="preSingleImageVisible=false"></pre-single-image>
    <!--分页表格-->
    <mix-table :page="page" @getPage="getPage" showCon="true">
      <template slot="column">
        <el-table-colum/n
        prop="id"
        label="ID">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="path"
          label="路径">
        </el-table-column>
        <el-table-column
          prop="suffix"
          label="后缀">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>
      </template>

      <template slot="con" slot-scope="{item}">
        <el-button plain size="small" type="primary"
                   @click="show(item)">查看
        </el-button>
        <el-button plain size="small" type="danger" @click="del(item)">删除</el-button>
      </template>
    </mix-table>
    <!--上传对话框-->
    <el-dialog title="上传" :visible.sync="dialogUploadVisible" with-credentials="true">
      <el-input v-model="uploadName" placeholder="请输入名称" style="margin-bottom: 10px;width: 360px"></el-input>
      <el-upload
        class="upload-demo"
        drag
        action=""
        :http-request="upload"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>

    <!--图片预览框-->
    <el-dialog title="图片" :visible.sync="dialogImageVisible" with-credentials="true">
      <img :src="imageUrl" alt="" style="max-width: 100%;max-height: 100%">
    </el-dialog>


  </div>
</template>

<script>
  import mixTable from '../../components/Table/mixTable'
  import Upload from '../../api/upload'
  import PreSingleImage from '../../components/Upload/preSingleImage'

  export default {
    name: 'Menu1',
    components: {
      mixTable, PreSingleImage
    },
    data() {
      return {
        page: null,
        dialogUploadVisible: false,
        dialogImageVisible: false,
        imageUrl: '',
        uploadName: '',
        preSingleImageVisible: false
      }
    },
    methods: {
      getPage(pageParam) {
        Upload.queryUpload({}, pageParam).then(res => {
          this.page = res.data.page
        })
      },
      getUplaodUrl() {
        return process.env.BASE_API.toString() + '/upload/add'
      },
      upload(e) {
        Upload.uploadFile(e.file, this.uploadName).then(res => {
          this.$message({
            message: res.data.msg,
            type: 'success'
          })
          this.getPage({})
          this.dialogUploadVisible = false
        })
      },
      del(item) {
        Upload.delUpload(item).then(res => {
          this.$message({
            message: res.data.msg,
            type: 'success'
          })
          this.getPage({})
        })
      },
      show(item) {
        if (item.suffix === '.png' || item.suffix === '.jpg') {
          this.dialogImageVisible = true
          this.imageUrl = item.path
        } else {
          this.$message({
            message: '非图片不能预览',
            type: 'warning'
          })
        }
      }
    },
    mounted() {
      console.log(process.env.BASE_API)
      this.getPage({})
    }
  }
</script>

